<template>
    <div class="store-goods-imgs">
        <div class="store-goods-wimg-top">
            <div class="store-goods-ctop" ref="storeCp">
                <img class="store-goods-img" ref="itemImg" @click="toSwiperIndex(key)" v-for="(value,key) in goodsMsgList" v-if="value.images[0]" :src="value.images[0]" alt="">
            </div>
        </div>
        <div class="store-goods-wimg-bottom">
            <div class="store-goods-cbottom displayFlex flex-no-wrap">
                <span class="store-goods-type" @click="choiseClassify(0,0)">全部</span>
                <span class="store-goods-type" @click="choiseClassify(value.parentClass.classId,key)" v-for="(value,key) in goodsClassifyList">{{value.parentClass.className}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "BottomFloor",
        props:{
            goodsClassifyListProp:{
                type:Array
            },
            goodsMsgListProp:{
                type:Array
            }
        },
        data(){
            return {
                goodsClassifyList:[],
                goodsMsgList:[],
            }
        },
        mounted(){
            this.goodsClassifyList = this.goodsClassifyListProp;
            this.goodsMsgList = this.goodsMsgListProp;
        },
        methods:{
            choiseClassify(classId,index){
                this.$emit('choiseClassify',classId,index);
            },
            toSwiperIndex(index){
                /*animate去中间*/
                let srollLeft = this.$refs.itemImg[index].offsetLeft - 1.73 * parseInt(document.documentElement.clientWidth) / 375 * 100  ;
                $('.store-goods-ctop').animate({'scrollLeft': srollLeft}, 400);
                this.$emit('toSwiperIndex',index)
            }
        },
        watch:{
            goodsClassifyListProp(val){
                this.goodsClassifyList = [];
                this.goodsClassifyList = val;
            },
            goodsMsgListProp(val){
                this.goodsMsgList = val;
            }
        }
    }
</script>

<style scoped lang="scss">
    .store-goods-img{
        width: .3rem;
        height: .37rem;
        object-fit: contain;
        margin-right: .16rem;
        border: 1px solid #fff;
        border-radius: 5px;
        display: inline-block;
    }
    .store-goods-img:last-of-type{
        margin-right: 0;
    }
    .store-goods-imgs{
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10;
        width: 100%;
    }
    .store-goods-wimg-top{
        height: .4rem;
        width: 100%;
        overflow: hidden;
        padding: 0 .14rem;
    }
    .store-goods-ctop{
        height: .6rem;
        overflow: auto;
        white-space: nowrap;
    }
    .store-goods-wimg-bottom{
        width: 100%;
        height: .5rem;
        overflow: hidden;
        border-bottom: 1px solid #fff;
    }
    .store-goods-cbottom{
        line-height: .5rem;
        height: .6rem;
        overflow: auto;
        white-space: nowrap;
    }
    .store-goods-type{
        display: inline-block;
        padding: 0 .15rem;
        color: #fff;
        text-align: center;
    }
</style>